<template>
  <div class="main-content">
    <div class="main-body">
      <div class="title">文档解读</div>
      <div class="header-box">
        <div class="header-item">
          <div class="header-item-title">
            <img src="@/static/image/documentUpload/document-prase-icon1.png" alt="" />
            <div>内容挖掘</div>
          </div>
          <div class="header-item-content">上传文档，自动解析文档内容</div>
        </div>
        <div class="header-item">
          <div class="header-item-title">
            <img src="@/static/image/documentUpload/document-prase-icon2.png" alt="" />
            <div>归纳总结</div>
          </div>
          <div class="header-item-content">洞察文档核心，总结归纳要点</div>
        </div>
        <div class="header-item">
          <div class="header-item-title">
            <img src="@/static/image/documentUpload/document-prase-icon3.png" alt="" />
            <div>配方提取</div>
          </div>
          <div class="header-item-content">精确提取材料配方、性能与工艺</div>
        </div>

      </div>
      <div class="upload-box">
        <a-upload-dragger v-show="!uploadLoading" v-model:fileList="fileList" class="upload-container" name="file"
          :show-upload-list="false" :max-count="1" :data="{
            user_id: useUserInfo.id,
            file_type: 'patent',
          }" :action="actionUrl"  :multiple="false" :before-upload="beforeUpload" @change="handleChange">
          <div class="center">
            <p class="ant-upload-drag-icon">
              <img src="@/static/image/documentUpload/document-upload-icon.png" alt="" />
            </p>
            <p class="ant-upload-text">
              将文件拖到此处，或<em>点击上传</em>
            </p>
            <p class="ant-upload-hint">仅支持上传 PDF 格式文档，且文档大小不超过 20M</p>
          </div>
        </a-upload-dragger>
        <div v-show="uploadLoading" class="loading-box">
          <a-spin tip="文件上传中..." size="large"></a-spin>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { type UploadChangeParam } from 'ant-design-vue';
import { useUploadFile } from '@/hook/useUploadFile';
const { fileList, beforeUpload, uploadLoading, uploadLoadingChange } = useUploadFile()
import { useUserInfoStore } from '@/stores/modules/userInfo'
import { message } from 'ant-design-vue';
import { useRouter } from 'vue-router';
import { saveOrUpdate } from '@/api/dialog';
const useUserInfo = useUserInfoStore()
const router = useRouter()
const emit = defineEmits(['success'])
const handleChange = (info: UploadChangeParam) => {
  // uploadLoading.value = false
  
  const { file, fileList, event } = info;
  console.log('File list:', fileList, file, event);
  if(file.status === 'uploading') {
    uploadLoading.value = true
  }
  if (file.status === 'done') {
    // 上传成功
    console.log('File uploaded successfully:', file.response);
    uploadLoading.value = false
    const pdfFile = {}
    pdfFile.url = file.response.data.file_url
    pdfFile.name = file.response.data.file_name
    pdfFile.paperId = file.response.data.paper_id
    pdfFile.size = file.response.data.file_size
    createdNewChat(pdfFile)
    // emit('success', file.response)
  } else if (file.status === 'error') {
    uploadLoading.value = false
    // 上传失败
    message.error('上传失败,请重新上传');
    console.error('File upload failed:', file.error);
  }
};
const actionUrl = `${import.meta.env.VITE_UPLOAD_ACTION}/pdf_process`
const createdNewChat = (file) => {
  console.log('file', file)
  saveOrUpdate({
    id: '',
    userId: useUserInfo.id as string,
    dialogName:  file.name,
    fileUrl: file.url,
    pdfId: file.paperId,
    fileSize: file.size,
    fileName: file.name,
    queryType: 2,
    processStatus: 3,
  }).then((res) => {
    const pdfFile: PdfFile = {
      paperId: file.paperId,
      url: file.url,
      size: file.size,
      name: file.name
    }
    console.warn(pdfFile,'pdfFile');
    
    router.push({
      path: `/chat/documentParsing/${res.data.entity}`,
    })
  })
}
</script>
<style lang="scss" scoped>
.main-content {
  width: 100%;
  height: 100vh;
  background-color: #F5F6F8;

  .main-body {
    width: 920px;
    margin: auto;
    padding-top: 56px;

    .title {
      color: #292929;
      font-size: 24px;
      margin-bottom: 20px;
    }

    .header-box {
      display: flex;
      justify-content: space-between;

      .header-item {
        background: #fff;
        border-radius: 8px;
        width: 290px;
        padding: 20px 24px;

        .header-item-title {
          display: flex;
          font-size: 16px;
          color: #16191D;
          font-weight: 500;
          line-height: 28px;

          img {
            width: 28px;
            height: 28px;
            margin-right: 12px;
          }
        }

        .header-item-content {
          color: #A3A4A5;
          margin-top: 12px;
        }
      }
    }

    .upload-box {
      width: 100%;
      height: calc(100vh - 324px);
      border-radius: 12px;
      padding: 24px;
      background: #fff;
      margin-top: 56px;

      .loading-box {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }

      .upload-container {
        position: relative;
        border-radius: 12px;
        width: 100%;
        height: 100%;

        .center {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

        .ant-upload-drag-icon {
          // margin-top: 200px;

          img {
            width: 38px;
            height: 38px;
          }

        }

        .ant-upload-text {
          color: #16191D;
          font-size: 16px;
        }

        .ant-upload-hint {
          color: #A3A4A5;

        }
      }

      :deep(.ant-upload.ant-upload-drag) {
        background: #F5F6F8 !important;
      }

      :deep(.ant-upload.ant-upload-drag-hover) {
        background: #EAF1FF !important;
      }
    }
  }


}
</style>